<template>
	<view class="page-content">
		<!-- head -->
		<view class="almost-lottery__head" :style="'background: url('+topImg+') no-repeat center center/cover;'">
			<view :class="['action', isApple && 'action-shadow']">
				<text class="content" @click="$util.go('lottery/log',{'path':'/plugin/'})">
					我的抽奖记录
				</text>
			 </view>
			<view class="tip flex-center">
				<view v-if="configInfo.plugin_lottery_type == 2">
					当前账户{{ configInfo.money_company }}：<text class="num">{{ userInfo.money }}</text>，
				</view>
				<view v-if="configInfo.plugin_lottery_type == 1">
					当前账户{{ configInfo.integral_company }}：<text class="num">{{ userInfo.integral }}</text>，
				</view>
				<text class="tip-content" v-if="configInfo.plugin_lottery_type == 2">
					每次抽奖消耗 {{ configInfo.plugin_lottery_num }} {{ configInfo.money_company }}
				</text>
				<text class="tip-content" v-if="configInfo.plugin_lottery_type == 1">
					每次抽奖消耗 {{ configInfo.plugin_lottery_num }} {{ configInfo.integral_company }}
				</text>
			</view>
		</view>
		
		<!-- lottery -->
		<view class="almost-lottery__wheel">
			<m-loading :show="listLoad"></m-loading>
			<almost-lottery
				:ring-count="6"
				:duration="3"
				:self-rotaty="false"
				:img-circled="true"
				:canvasCached="true"
				:prize-list="prizeList"
				:prize-index="prizeIndex"
				:lotteryBg="lotteryBg"
				:actionBg="actionBg"
				@reset-index="prizeIndex = -1"
				@draw-before="handleDrawBefore"
				@draw-start="handleDrawStart"
				@draw-end="handleDrawEnd"
				@finish="handleDrawFinish"
				v-if="prizeList.length"
			/>
   <!--   <view class="almost-lottery__count">
        <text class="text">剩余免费抽奖 {{ freeNum }} 次</text>
      </view> -->
		</view>
		<!-- rule -->
		<view class="almost-lottery__rule">
			<view class="rule-head">
				<view class="line"></view>
				<text class="title">活动规则</text>
				<view class="line"></view>
			</view>
			<view class="rule-body">
				<view class="item">
				  <view class="number">1</view>
				  <view class="text">
					<text>抽奖细则：</text>
					<text  v-if="configInfo.plugin_lottery_type == 2">
						每次抽奖消耗 {{ configInfo.plugin_lottery_num }} {{ configInfo.money_company }}。
					</text>
					<text  v-if="configInfo.plugin_lottery_type == 1">
						每次抽奖消耗 {{ configInfo.plugin_lottery_num }} {{ configInfo.integral_company }}。
					</text>
				  </view>
				</view>
				<view class="item item-rule">
					<view class="number">2</view>
					<view class="text">
						<text>奖励说明：</text>
						<text>a.{{ configInfo.money_company }}奖：系统会即时转入账户余额，可提现。</text>
						<text>b.{{ configInfo.integral_company }}奖：系统会即时转入账户余额，可在平台内使用。</text>
						<text>c.其他奖：中奖后需联系客服领取。</text>
					</view>
				</view>
				<template v-if="isApple">
					<view class="item"><view class="number">3</view><view class="text">本次活动由{{configInfo.sitename}}发起，与Apple.Inc无关。</view></view>
					<view class="item"><view class="number">4</view><view class="text">苹果公司不是本活动的赞助商且没有以任何形式参与活动。</view></view>
					<view class="item"><view class="number">5</view><view class="text">本活动最终解释权归{{configInfo.sitename}}所有。</view></view>
				</template>
				<template v-else>
					<view class="item"><view class="number">3</view><view class="text">本次活动由{{configInfo.sitename}}发起。</view></view>
					<view class="item"><view class="number">4</view><view class="text">本活动最终解释权归{{configInfo.sitename}}所有。</view></view>
				</template>
			</view>
		</view>
		<side-tools :scrollTop="scrollTop"></side-tools>
  </view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data () {
			return {
				// 以下是转盘配置相关数据
				// 以下是转盘 UI 配置
				// 转盘外环图，如有需要，请参考替换为自己的设计稿
				lotteryBg: require('@/static/images/lottery/lottery-bg.png'),
				// 抽奖按钮图
				actionBg: require('@/static/images/lottery/action-bg.png'),
				// 默认顶部图
				topBg: require('@/static/images/lottery/top-bg.png'),
				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				// 奖品是否设有库存
				onStock: false,
				// 中奖下标
				prizeIndex: -1,
				
				// 是否正在抽奖中，避免重复触发
				prizeing: false,
				scrollTop: 0,
				
				listLoad: true,
				// // 以下为业务需求有关示例数据
				// // 金币余额
				// goldCoin: 2000,
				// // 当日免费抽奖次数余额
				// freeNum: 1,
				// // 每次消耗的金币数
				// goldNum: 20,
				// // 每天免费抽奖次数
				// freeNumDay: 1
			}
		},
		computed: {
			isApple () {
				return uni.getSystemInfoSync().platform === 'ios'
			},
			topImg(){
				let img = this.configInfo.plugin_lottery_top_img
				return img ? img :  this.topBg
			},
			...mapState({
				userInfo: state => state.user.userInfo,
				configInfo: state => state.config.configInfo,	
			})
		},
		onLoad () {
			this.prizeList = []
			this.getPrizeList()
		},
		onUnload () {
			uni.hideLoading()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),
			
			// 获取奖品列表
			async getPrizeList () {
				uni.showLoading({
				  title: '奖品准备中...'
				})
				const res = await this.$api.plugin.getLotteryPrizeList()
				if(res.code == 200){
					this.prizeList = res.data
				}
			},
	
			
				
			// 抽奖开始之前
			handleDrawBefore (callback) {
				console.log('抽奖开始之前')
				let flag = true
				let num = parseFloat(this.configInfo.plugin_lottery_num)
				
				if(num > 0){
					let thos = this
					if(this.configInfo.plugin_lottery_type == 1){
						// 积分抽奖
						if(this.userInfo.integral < num){
							flag = false
							uni.showModal({
								title: thos.configInfo.integral_company+'不足',
								content: '是否前往赚取'+thos.configInfo.integral_company+'？',
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index',
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					}
					if(this.configInfo.plugin_lottery_type == 2){
						// 货币抽奖
						if(this.userInfo.money < num){
							flag = false
							uni.showModal({
								title: this.configInfo.money_company+'不足',
								content: '是否前往赚取'+this.configInfo.money_company+'？',
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index',
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					}
				}
				callback(flag)
				// if (this.freeNum > 0 || this.goldCoin >= this.goldNum) {
				
				//   // 更新免费次数或金币余额
				//   if (this.freeNum > 0) {
				// 	this.freeNum--
				//   } else if (this.goldCoin >= this.goldNum) {
				// 	this.goldCoin -= this.goldNum
				//   }
				  
				//   flag = true
				// } else {
				//   flag = false
				//   uni.showModal({
				// 	title: '金币不足',
				// 	content: '是否前往赚取金币？',
				// 	success: (res) => {
				// 	  // 这里需要根据业务需求处理，一般情况下会引导用户前往赚取金币的页面
				// 	  console.log('金币不足', res)
				// 	}
				//   })
				// }
				// callback(flag)
			},
		
			// 本次抽奖开始
			handleDrawStart () {
				console.log('触发抽奖按钮')
				if (this.prizeing) return
				this.prizeing = true
				this.tryLotteryDraw()
			},
		  
			tryLotteryDraw () {
				console.log('旋转开始，获取中奖下标......')
				this.remoteGetPrizeIndex()
			},
		  
			async remoteGetPrizeIndex () {
				let stoTimer = setTimeout( async () => {
				  stoTimer = null
				  const res = await this.$api.plugin.lotteryRun()
				  if(res.code == 200){
					  this.prizeIndex = res.data.prize_id - 1
				  }
				  console.log(res)
				}, 200)
			},
	  
		  // 本次抽奖结束
		  handleDrawEnd () {
			// console.log('旋转结束，执行拿到结果后到逻辑')
			
			let {
				prizeName,
				prizeType
			} = this.prizeList[this.prizeIndex]
			let tipContent = ''
			if(prizeType == 4){
				tipContent = '很遗憾，没有中奖，请再接再厉！'
			}else{
				if(prizeType != 3){
					tipContent = `恭喜您，获得 ${prizeName} ！`
				}else{
					tipContent = `恭喜您，获得 ${prizeName} ，请联系客服进行兑奖！`
				}
			}
			uni.showModal({
				content: tipContent,
				showCancel: false,
				complete: () => {
					this.prizeing = false
					this.getUserInfo()
				}
			})
		 },
		  // 抽奖转盘绘制完成
		handleDrawFinish (res) {
			// console.log('抽奖转盘绘制完成', res)
			
			// if (res.ok) {
			//   // 计算结束绘制的时间
			//   if (console.timeEnd) {
			// 	console.timeEnd('绘制转盘用时')
			//   }
			// }
			this.listLoad = false
			let stoTimer = setTimeout(() => {
				stoTimer = null
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					mask: true,
					icon: 'none'
				})
			}, 50)
		}
    },

  }
</script>

<style lang="scss" scoped>
  .page-content{
    flex: 1;
    background-color: #FF893F;
  }
  
  .almost-lottery__head {
    position: relative;
    width: 100%;
    height: 640rpx;
    // background: url(v-bind(topImg)) no-repeat center center/cover;
    .action {
      position: relative;
      top: 400rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 360rpx;
      height: 66rpx;
      line-height: 66rpx;
      margin: 0 auto;
      color: #FFFFFF;
      font-size: 32rpx;
      background-color: rgba(255, 136, 61, 1);
      border-radius: 44rpx;
    }
    .action-shadow {
      box-shadow: 0px 10rpx 0px 0px rgba(235, 112, 36, 1);
    }
    .gold {
      width: 44rpx;
      height: 44rpx;
      margin-right: 10rpx;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      background-image: url("~static/images/lottery/gold.png");
      
      @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
        background-image: url("~static/images/lottery/gold@2x.png");
      }
      
      @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url("~static/images/lottery/gold@3x.png");
      }
    }
    .num {
      color: #F9FC31;
    }
    .tip {
      position: relative;
      top: 428rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      text-align: center;
    }
  }
  
  .almost-lottery__wheel {
    text-align: center;
    .almost-lottery__count {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 40rpx 0;
    }
    .text {
      color: #FFFFFF;
      font-size: 24rpx;
    }
  }
  
  .almost-lottery__rule {
    padding: 0 28rpx;
    color: #FFF8CB;
    .rule-head {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 40rpx 0;
      .line {
        flex: 1;
        height: 1px;
        background-color: #FFF3A5;
      }
      .title {
        width: 280rpx;
        color: #F63857;
        line-height: 70rpx;
        text-align: center;
        margin: 0 20rpx;
        border-radius: 8rpx;
        background-image: linear-gradient(0deg,rgba(255,242,158,1),rgba(255,244,168,1));
      }
    }
    .rule-body {
      color: #FFF8CB;
      font-size: 24rpx;
      padding: 10rpx 0 40rpx;
      .item {
        display: flex;
        margin-bottom: 10rpx;
      }
      .number {
        position: relative;
        top: 4rpx;
        width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        text-align: center;
        color: #F63857;
        background: #FFF8CB;
        border-radius: 50%;
        margin-right: 10rpx;
      }
      .text {
        flex: 1;
      }
      .item-rule .text {
        display: flex;
        flex-direction: column;
      }
    }
  }
  

  
  .almost-lottery__popup-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .almost-lottery {
      background: transparent;
    }
  }
  
	.lottery-log{
		position: fixed;
		right: 0;
		top: 200rpx;
		color: #666;
		background-color: #FFF3A580;
		font-size: 25rpx;
		padding: 15rpx 25rpx;
		border-radius: 25px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
</style>
